<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
		<link rel="stylesheet" href="../css/style-reset.css">
		<title>企业课订单</title>

		<style type="text/css">
			/*top-ctnt*/
			.top-ctnt{
				background-color: #dcdcdc;
				padding: 5px;
				text-align: center;
				color: #42455c;
				font-size: 14px;
			}
			/*common*/
			.content ul{
				margin-top: 10px;
				background-color: #fff;
				border-top: 1px solid #dcdcdc;
				border-bottom: 1px solid #dcdcdc;
			}
			.content ul.order-num{
				margin-top: 0;
			}
			.content ul li{
				padding: 10px;
				padding-left: 0;
				margin-left: 10px;
				border-bottom: 1px solid #dcdcdc;
				overflow: hidden;
			}
			.content ul li:last-child{
				border-bottom: none;
			}
			.content ul li span{
				display: inline-block;
			}
			.content ul li .left{
				font-size: 14px;
				color: #42455c;
				display: inline-block;
				width: 65px;
			}
			/*class-detail*/
			ul.class-detail{
				margin-top: 0;
			}
			.class-detail li span{
				float: left;
			}
			.class-detail li .left{
				margin-right: 20px;
			}
			.class-detail .order-num .left{
				color: #b4b4b4;
			}
			.class-detail .order-num .right{
				color: #b4b4b4;
			}
			.class-detail .class-msg .right{
				display: inline-block;
			}
			.class-detail .class-msg .right .msg-item{
				display: block;
				float: none;
				padding-bottom: 5px;
				color: #b4b4b4;
			}
			.class-detail .class-msg .right .msg-item:last-child{
				padding-bottom: 0;
			}
			.class-detail .class-msg .right .msg-item-a{
				overflow: hidden;
			}
			.m-i-l{
				margin-right: 30px;
			}
			.class-detail .venues .right{
				color: #b4b4b4;
			}
			.class-detail li .right{
				display: block;
				width: 60%;
				font-size: 14px;
				color: #666;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			/*stu-detail*/
			.stu-detail li{
				position: relative;
			}
			.stu-detail li span{
				display: inline-block;
			}
			.stu-detail .p-l{
				position: absolute;
				left: 0px;
				width: 65px;
				margin-right: 20px;
				font-size: 14px;
				color: #42455c;
			}
			.stu-detail .p-c{
				display: inline-block;
				width: 60%;
				margin-left: 85px;
				margin-right: 5px;
				font-size: 14px;
				line-height: 15px;
				color: #fab345;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.stu-detail input::-webkit-input-placeholder{
				color: #fab345;
			}
			.stu-detail .p-r{
				position: absolute;
				right: 10px;
			}
			.stu-detail .arrow{
				display: inline-block;
				width: 11px;
				height: 16px;
				background-image: url(../images/icons/arrow_in.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			/*msg-custom*/
			ul.msg-custom{
				margin-bottom: 65px;
			}
			ul.msg-custom li .left{
				float: left;
				width: 85px;
				color: #42455c;
			}
			ul.msg-custom li .right{
				float: right;
				display: inline-block;
				width: 11px;
				height: 16px;
				background-image: url(../images/icons/arrow_in.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			/* expect-total */
			.expect-total{
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
			}
			ul.expect-total li{
				position: relative;
			}
			ul.expect-total li .left{
				float: left;
				display: inline-block;
				color: #42455c;
				margin-right: 20px;
				line-height: 35px;
			} 
			ul.expect-total li .total{
				float: left;
				font-size: 18px;
				font-weight: 600;
				color: #e95656;
				line-height: 35px;
			}
			ul.expect-total .icon-m{
				font-size: 14px;
			}
			.expect-total li button{
				float: right;
				display: inline-block;
				height: 35px;
				width: 110px;
				background-color: #53cecb;
				border: none;
				border-radius: 4px;
				-webkit-border-radius: 4px;
				text-align: center;
				line-height: 35px;
				color: #fff;
				font-size: 18px;
				font-weight: 600;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<p class="top-ctnt">
				客服马上就来跟进预约啦！
			</p>
			<ul class="class-detail">
				<li class="order-num">
					<span class="left">订单号</span>
					<span class="right order-id">23093409850437</span>
				</li>
				<li class="class-msg">
					<span class="left">课程信息</span>
					<span class="right">
						<span class="msg-item">白领肩部修复套餐</span>
						<span class="msg-item">6个月10次课，不限个人或集体使用</span>
						<span class="msg-item msg-item-a">
							<span class="m-i-l">¥ 6,000</span>
							<span class="m-i-r">60分钟/次</span>
						</span>
						<span class="msg-item">可提供发票</span>
					</span>
				</li>
				<li class="venues">
					<span class="left">合作场馆</span>
					<span class="right">朝阳公园会馆</span>
				</li>
			</ul>
			<ul class="stu-detail">
				<li>
					<span class="p-l">公司名称</span>
					<input class="p-c" type="text" placeholder="请填写正确的全称">
					<span class="p-r arrow"></span>
				</li>
				<li>
					<span class="p-l">公司地址</span>
					<input class="p-c" type="text" placeholder="请填写完整的地址">
					<span class="p-r arrow"></span>
				</li>
				<li>
					<span class="p-l">联系人</span>
					<input class="p-c" type="text" placeholder="您的姓名">
					<span class="p-r arrow"></span>
				</li>
				<li>
					<span class="p-l">联系电话</span>
					<input class="p-c" type="text" placeholder="电话号码">
					<span class="p-r arrow"></span>
				</li>
				<li>
					<span class="p-l">邮箱</span>
					<input class="p-c" type="text" placeholder="请核对您的邮箱">
					<span class="p-r arrow"></span>
				</li>
			</ul>
			<ul class="msg-custom">
				<li>
					<span class="left">给客服留言</span>
					<span class="right arrow"></span>
				</li>
			</ul>
			<ul class="expect-total">
				<li>
					<span class="left">预计总额</span>
					<span class="total">
						<span class="icon-m">¥</span>12,000
					</span>
					<button class="confirm-btn">确认预约</button>
				</li>
			</ul>
		</div>
	</body>
</html>